const path = require('path'); // 引入path模块，用于处理文件路径
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入HTML插件，用于生成HTML文件

module.exports = (env, argv) => {
  // 根据环境变量判断是否为生产模式
  const isProduction = argv.mode === 'production';
  
  return {
    // 入口文件配置
    entry: './src/index.js', // 指定应用的入口文件
    
    // 输出文件配置
    output: {
      path: path.resolve(__dirname, 'dist'), // 输出目录为dist文件夹
      filename: isProduction ? '[name].[contenthash].js' : '[name].js', // 生产环境使用hash文件名
      clean: true, // 每次构建前清理dist目录
    },
    
    // 模块解析配置
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/, // 匹配.js和.jsx文件
          exclude: /node_modules/, // 排除node_modules目录
          use: {
            loader: 'babel-loader', // 使用babel-loader处理JavaScript文件
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'], // 使用env和react预设
            },
          },
        },
        {
          test: /\.css$/, // 匹配.css文件
          use: ['style-loader', 'css-loader'], // 使用style-loader和css-loader处理CSS
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i, // 匹配图片文件
          type: 'asset/resource', // 将图片作为资源文件处理
        },
      ],
    },
    
    // 插件配置
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.html', // 使用public/index.html作为模板
        filename: 'index.html', // 生成的HTML文件名
      }),
    ],
    
    // 开发服务器配置
    devServer: {
      static: {
        directory: path.join(__dirname, 'public'), // 静态文件目录
      },
      port: 3000, // 开发服务器端口
      hot: true, // 启用热重载
      open: true, // 自动打开浏览器
      historyApiFallback: true, // 支持HTML5 History API
    },
    
    // 解析配置
    resolve: {
      extensions: ['.js', '.jsx', '.json'], // 自动解析这些扩展名的文件
    },
    
    // 开发工具配置
    devtool: isProduction ? 'source-map' : 'eval-source-map', // 源码映射配置
  };
};
